<div class="layui-fluid" >
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" action="" lay-filter="addForm">
                <div class="layui-form-item">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-block">
                        <input type="radio" name="type" lay-filter="type" value="0" title="目录" >
                        <input type="radio" name="type" lay-filter="type" value="1" title="菜单" checked="">
                        <input type="radio" name="type" lay-filter="type" value="2" title="资源">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" id="name"><span style="color: red">*</span>菜单名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item type0 type1">
                    <label class="layui-form-label">菜单图标</label>
                    <div class="layui-input-block">
                        <input type="hidden" id="iconValue" value="" name="icon"/>
                        <input type="text" id="iconCode" autocomplete="off" placeholder="请选择" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" id="parent">所属位置</label>
                    <input type="hidden" name="parentId" id="parentId" value=""/>
                    <!--验证   无-根目录  0 -目录  1 - 菜单   -->
                    <input type="hidden" id="verify" value="0"/>
                    <div class="layui-input-block">
                        <input type="text" id="parentName" lay-filter="parentName" placeholder="为空表示根节点" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item type1">
                    <label class="layui-form-label"><span style="color: red">*</span>菜单路径</label>
                    <div class="layui-input-block">
                        <input type="text" name="url" placeholder="包含参数 例如：/sys/log/list/name=3333/type=1" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">排序号</label>
                    <div class="layui-input-block">
                        <input type="number" value="100" name="orderNum"  autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item type1 type2" style="display: none">
                    <label class="layui-form-label">授权标识</label>
                    <div class="layui-input-block">
                        <input type="text" name="perms"  autocomplete="off" class="layui-input">
                    </div>
                </div>
                <input type="hidden" name="isShow" id="isShow"  value="1" />
                <div class="layui-form-item">
                    <label class="layui-form-label">是否显示</label>
                    <div class="layui-input-block">
                        <input type="checkbox" checked="" value="1" lay-skin="switch" lay-filter="isShow" lay-text="是|否">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <a class="layui-btn" lay-submit="" lay-filter="addMenuSubmit">立即提交</a>
                        <a class="layui-btn layui-btn-primary" id="close">关闭</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    var AddMenu = function (index) {
        var $this = this;
        var admin = layui.admin,
            form = layui.form,
            $ = layui.jquery,
            treeSelect = layui.treeSelect,
            iconPicker = layui.iconPicker;
        //初始化
        this.init = function () {
            //初始化  树形 下拉
            $this.initTreeSelect();
            //初始化图标选择
            $this.initIconPicker();
            //初始化表单
            form.render();
            /* 监听指定开关 */
            form.on('switch(isShow)', function (data) {
               if(this.checked){
                    $("#isShow").val(1);
               }else{
                   $("#isShow").val(0);
               }
            });

            /* 监听提交 */
            form.on('submit(addMenuSubmit)', function (data) {
                var requestData = data.field;
                if(!$("#parentId").val() && data.field.type == 2){  //所属位置 为空    //按钮
                    admin.error('请选择所属位置');
                    return false;
                }
                if($("#parentId").val() && data.field.type == 2 && $("#verify").val() != 1){            //按钮
                    admin.error('所属位置，请选择根节点菜单');
                    return false;
                }
                if($("#parentId").val() && data.field.type == 1 && $("#verify").val() != 0){            //菜单
                    admin.error('所属位置，请选择根节点目录');
                    return false;
                }
                if($("#parentId").val() && data.field.type == 0 && $("#verify").val() != 0){            //菜单
                    admin.error('所属位置，请选择节点目录');
                    return false;
                }
                //提交用户
                admin.post({
                    api:'saveMenu',
                    data:JSON.stringify(requestData),
                    contentType: 'application/json;charset=UTF-8',
                    success:function (res) {
                        if(res.code == 0){
                            admin.success('操作成功',function () {
                                parent.menuList.refresh();
                                parent.layer.close(index);
                            });
                        }
                    }
                });
                return false;
            });
            //关闭窗口
            $("#close").click(function () {
                parent.layer.close(index);
            });
            /*单选按钮事件监听*/
            form.on('radio(type)', function (data) {
                if(data.value == 0){  //目录
                    $("#name").html('<span style="color: red">*</span>目录名称');
                    $("#icon").html("目录图标");
                    $("#parent").html('所属位置');
                    $("#parentName").removeAttr("lay-verify");
                    $("#parentName").attr("placeholder","为空表示根节点");
                    $("input[name='url']").removeAttr("lay-verify");
                    $("#verify").val("");
                    $(".type1").hide();
                    $(".type2").hide();
                    $(".type0").show();
                }else if(data.value == 1){ //菜单
                    $("#icon").html("菜单图标");
                    $("#name").html('<span style="color: red">*</span>菜单名称');
                    $("#parent").html('所属位置');
                    $("#parentName").removeAttr("lay-verify");
                    $("#parentName").attr("placeholder","为空表示根节点");
                    $("input[name='url']").attr("lay-verify");
                    $("#verify").val(0);
                    $(".type0").hide();
                    $(".type2").hide();
                    $(".type1").show();
                }else if(data.value == 2){//按钮
                    $("#name").html('<span style="color: red">*</span>按钮名称');
                    $("#parent").html('<span style="color: red">*</span>所属位置');
                    $("#parentName").attr("lay-verify");
                    $("#parentName").attr("placeholder","不能为空");
                    $("input[name='url']").removeAttr("lay-verify");
                    $("#verify").val(1);
                    $(".type0").hide();
                    $(".type1").hide();
                    $(".type2").show();
                }
            });
        };
        //初始化  树形 下拉
        this.initTreeSelect = function () {
            treeSelect.render({
                // 选择器
                elem: '#parentName',
                // 数据
                api: 'getSelectMenuList',
                // 占位符
                placeholder: '修改默认提示信息',
                // 是否开启搜索功能：true/false，默认false
                search: false,
                // 点击回调
                click: function(d){
                    $("#verify").val(d.current.type);
                    $("#parentId").val(d.current.id);
                }
            });
        };
        //初始化图标选择
        this.initIconPicker = function () {
            iconPicker.render({
                // 选择器，推荐使用input
                elem: '#iconCode',
                // 数据类型：fontClass/unicode，推荐使用fontClass
                type: 'fontClass',
                // 是否开启搜索：true/false
                search: false,
                // 是否开启分页
                page: true,
                // 每页显示数量，默认12
                limit: 30,
                // 点击回调
                click: function (data) {
                    $("#icon").val(data.icon)
                }
            });
        }
    };

</script>